<template>
  <div v-if="couponItem" class="c-p c-br20 c-bg-white c-text-hidden coms-coupon-item" :class="[isCouponDisable ? 'disable' : '', size]">
    <div class="c-flex-row c-aligni-center c-pv20" @click="clickCouponItem(couponItem)">
      <!-- 兑换券 -->
      <div v-if="couponItem.type == 1" class="c-flex-column c-aligni-center body-left">
        <div class="coupon-type-1 c-w100 c-hh84"></div>
      </div>
      <!-- 无门槛 -->
      <div v-else-if="couponItem.type == 2" class="c-flex-column c-aligni-center body-left">
        <div class="c-fc-xmlred c-fw600 c-textAlign-c">
          <span :class="[size == 'large' ? 'c-fs24' : 'c-fs20']" class="c-fw-b">￥</span><span v-couponprice="{ price: couponItem.price, size: size }" class="c-fw600">{{ Number(couponItem.price) }}</span>
        </div>
        <div class="c-fc-xmlred c-fs20 c-textAlign-c">{{ amountText }}</div>
      </div>
      <!-- 满减券 -->
      <div v-else-if="couponItem.type == 3" class="c-flex-column c-aligni-center body-left">
        <div class="c-textAlign-c c-fc-xmlred">
          <span :class="[size == 'large' ? 'c-fs24' : 'c-fs20']" class="c-fw-b">￥</span><span v-couponprice="{ price: couponItem.price, size: size }" class="c-fw600">{{ Number(couponItem.price) }}</span>
        </div>
        <div class="c-fc-xmlred c-fs20 c-textAlign-c">{{ amountText }}</div>
      </div>
      <!-- 抵价券 -->
      <div v-else-if="couponItem.type == 4" class="c-flex-column c-aligni-center body-left">
        <div class="c-fc-xmlred c-fs32 c-fw600 c-textAlign-c">抵价券</div>
        <div class="c-fc-xmlred c-fs20 c-textAlign-c c-mt4">无门槛</div>
      </div>
      <!-- 折扣券 -->
      <div v-else-if="couponItem.type == 5" class="c-flex-column c-aligni-center body-left">
        <div class="c-fc-xmlred c-fs48 c-fw600 c-textAlign-c">{{ Number(couponItem.price) }}<span class="c-fs24">折</span></div>
        <div class="c-fc-xmlred c-fs20 c-textAlign-c c-mt4">{{ amountText }}</div>
      </div>
      <!-- 代金券-付费券 -->
      <div v-else-if="couponItem.type == 6" class="c-flex-column c-aligni-center body-left">
        <div class="c-fc-xmlred c-fs48 c-fw600 c-textAlign-c">
          <span :class="[size == 'large' ? 'c-fs24' : 'c-fs20']" class="c-fw-b">￥</span><span v-couponprice="{ price: couponItem.price, size: size }" class="c-fw600">{{ Number(couponItem.price) }}</span>
        </div>
        <div class="c-fc-xmlred c-fs20 c-textAlign-c c-mt4">{{ amountText }}</div>
      </div>
      <!-- 右侧内容 -->
      <div class="c-flex-1 c-text-hidden c-ph10">
        <slot v-if="$slots.bodyRight" name="bodyRight"></slot>
        <div v-else class="c-ph10 body-right-con">
          <div class="c-flex-row c-aligni-center">
            <div :class="[size == 'small' ? 'c-fs22' : 'c-fs26']" class="c-fc-xblack c-fw600 c-text-ellipsis1">{{ couponItem.name }}</div>
          </div>
          <div v-if="validityPeriodText" :class="[size == 'small' ? 'c-fs18' : 'c-fs20']" class="c-fc-gray c-mt8">{{ validityPeriodText }}</div>
          <div v-if="applyText" :class="[size == 'small' ? 'c-fs18' : 'c-fs20']" class="c-fc-gray c-mt8">{{ applyText }}</div>
        </div>
      </div>
    </div>
    <template v-if="dynicShowFooter">
      <!-- 分割线 -->
      <div class="divider-line">
        <div class="line-mid"></div>
        <div class="circle-lf"></div>
        <div class="circle-rt"></div>
      </div>
      <!-- 底部 -->
      <div class="c-pt2 c-pb12 c-mh20 c-flex-row  c-aligni-center c-aligni-start" :class="[$slots.footerLeft || couponItem.desc ? 'c-justify-sb' : 'c-justify-end']">
        <slot v-if="$slots.footerLeft" name="footerLeft"></slot>
        <template v-else>
          <div v-if="couponItem.desc" @click="toggleExpand" class="c-fs20 c-fc-gray c-flex-1 c-hh40 c-flex-row c-aligni-center">
            <div>使用说明</div>
            <div class="c-fs22 c-fw600 iconfont c-ml12 c-flex-shrink0">{{ isExpandIntro ? '&#xe67a;' : '&#xfbcd;' }}</div>
          </div>
        </template>
        <div class="c-flex-row c-flex-shrink0">
          <slot v-if="$slots.footerRight" name="footerRight"></slot>
          <template v-else>
            <slot name="footerBtn"></slot>
            <template v-if="btnInfo">
              <div v-if="btnInfo.showCheck" class="c-fs20 c-ww100 c-hh40 c-br20 c-ml20 c-flex-row c-flex-center xmlred-bd1 c-bg-xmlred c-flex-shrink0 c-fc-white c-fw-b" @click="goMyValueVoucher(couponItem)">
                查看
              </div>
              <div v-if="btnInfo.showUse" class="c-fs20 c-ww100 c-hh40 c-br20 c-ml20 c-flex-row c-flex-center xmlred-bd1 c-bg-xmlred c-flex-shrink0 c-fc-white c-fw-b" @click="goUseCoupon(couponItem)">
                使用
              </div>
              <div v-if="btnInfo.showGet" class="c-fs20 c-fc-white c-ww100 c-hh40 c-br20 c-ml20 c-flex-row c-flex-center xmlred-bd1 c-flex-shrink0 c-bg-xmlred c-fw-b" @click.stop="getCoupon(couponItem)">
                领取
              </div>
            </template>
          </template>
        </div>
      </div>
      <div v-show="isExpandIntro" class="c-fs20 c-fc-gray c-ph20 c-pb20">{{couponItem.desc}}</div>
    </template>
    <!-- 右上角标识 -->
    <div v-if="tagInfo" class="c-pa c-p-t0 c-p-r0 c-pz1 coms-coupon-tag">
      <div :class="tagInfo.className" class="c-fs18 c-ph8 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 c-ws-n c-lh18 c-fc-xmlred">x{{ tagInfo.text }}</div>
    </div>
    <!-- 优惠券状态 -->
    <div v-if="statusInfo" class="c-pa c-p-t0 c-p-r0 coms-coupon-status"><i class="iconfont c-fs100 c-fc-sgray" :class="statusInfo.className"></i></div>
    <slot></slot>
  </div>
</template>
<script>
/**
 * slots插槽:
 * slot: 默认的插槽
 * footerRight：底部右侧插槽
 * footerLeft：底部左侧插槽
 * bodyRight： 主体右侧插槽
 优惠券对应字段描述
{
 useStatus: -1：未使用   1已使用  2线下核销（大于1都是已使用）
 isCodeExpired： 领取的优惠券是否已过期
 amount：满多少元可用 (满减和折扣的时候可以选择)
 price：优惠金额，如果是折扣券，表示打多少折
 giftStatus:  1转赠中  2已转赠
 limit: 限制每个用户领取个数，-1表示不限制
 encRedeemCodeId：优惠券唯一id(加密)
 redeemCodeId： 优惠券唯一id
 rcdId: 领取到的券码唯一id(18882844)
 eRcdId 领取到的券码唯一id(abrdmwenka)(下单的时候用的)加密
 status：1 未开始，2进行中，3已停止，4已过期，5已作废
 redeemVersion：优惠券版本:1=日版优惠券，2=新版优惠券
 redeemType：券适用商品
 subType：优惠子类型(使用门槛):1=无门槛，2=满 xx 元可用
 isValuableCoupon  是否是有价券
 isJwRedeemCode 是否是代金券
 couponNum 后台设置的可以领取的数量
 receivedCouponNum 实际领取的数量
 }
*/
import { utilJs } from '@/utils/common.js';
export default {
  name: 'CouponItemCom',
  directives: {
    couponprice: {
      bind(element, binding) {
        // 指令与元素成功绑定时（一上来）
        const price = '' + binding.value.price;
        const size = binding.value.size;
        let fontSizeArr = [];
        if (size == 'large') {
          fontSizeArr = ['c-fs32', 'c-fs36', 'c-fs48'];
        } else {
          fontSizeArr = ['c-fs24', 'c-fs26', 'c-fs32'];
        }
        if (size) {
          if (price.length >= 8) {
            element.classList.add(fontSizeArr[0]);
          } else if (price.length >= 6) {
            element.classList.add(fontSizeArr[1]);
          } else {
            element.classList.add(fontSizeArr[2]);
          }
        }
      }
    }
  },
  props: {
    couponInfo: {
      type: Object,
      default: null
    },
    showFooter: {
      // 是否显示底部
      type: Boolean,
      default: true
    },
    disable: {
      // 优惠券是否可用（是否置灰）,不同地方可能有不能的判断，需要让优惠券置灰
      type: Boolean,
      default: false
    },
    // isShowTagInfo: {
    //   type: Boolean,
    //   default: true
    // },
    size: {
      type: String,
      default: 'large'
    },
    successTipType: {
      // 领取成功提示
      type: Number,
      default: 1 // 提示领取成功   2弹框
    },
    source: {
      // 领取来源
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      couponItem: '', // 优惠券数据结构
      isExpandIntro: false, // 是否展开介绍
      validityPeriodText: '', // 有效期
      applyText: '', // 适用范围
      tagInfo: null, // 右上角标签的信息
      amountText: '', // 满减还是付费免费文字信息
      btnInfo: null, // 按钮对应
      statusInfo: null, // 优惠券状态对象信息  已使用 已过期
      isCouponDisable: false, // 优惠券不可用
      isShowExpandBtn: false, // 是否显示展开的按钮
      ftLeftElemId: '', // 介绍元素的id
      ftRightElemId: '', // 底部按钮区域容器的id
      ftDescElemId: '', // 底部介绍元素
      ftElemId: '', // 底部容器的id
      dynicShowFooter: true // 动态是否显示底部
    };
  },
  watch: {
    couponInfo: {
      handler(val) {
        if (val.desc) {
          val.desc = val.desc.replace(/^\s*|\s*$/g, '');
        }
        if (!val.startAt && val.startTime) {
          // 直播的字段是用startTime  endTime, 其他地方用的是startAt endAt, 所以转换一次
          val.startAt = val.startTime;
          val.endAt = val.endTime;
        }
        this.couponItem = val;
        this.isCouponDisable = this._getDynicCounpDisable(val);
        this.validityPeriodText = this._getValidityPeriodText(val);
        this.applyText = this._getApplyText(val);
        this.statusInfo = this._getStatusInfo(val);
        this.tagInfo = this._getTagInfo(val);
        this.amountText = this.getAmountText(val);
        this.btnInfo = this._getBtnInfo(val);
        this.$nextTick(() => {
          this.dynicShowFooter = this.getDynicShowFooter(val);
          // if (this.dynicShowFooter) {
          //   this._setShowExpandBtn();
          // }
        });
      },
      immediate: true
    }
  },
  mounted() {},
  activated() {},
  methods: {
    clickCouponItem(data) {
      this.$emit('clickCouponItem', data);
    },
    toggleExpand() {
      this.isExpandIntro = !this.isExpandIntro;
    },
    // 底部动态显示计算
    getDynicShowFooter(data) {
      let flag = this.showFooter;
      if (this.showFooter) {
        // 显示的时候 动态计算
        const isShowDesc = !!data.desc;
        let isShowBtn = false;
        const btnInfo = this.btnInfo;
        // 有任何一个按钮显示，那么就表示按钮存在
        for (const i in btnInfo) {
          if (btnInfo[i] == true) {
            isShowBtn = true;
          }
        }
        // 没有插槽，使用说明，没有按钮 说明底部是空的
        if (!this.$slots.footerRight && !this.$slots.footerLeft && !this.$slots.footerBtn && !isShowDesc && !isShowBtn) {
          flag = false;
        }
      }
      return flag;
    },
    // 是否不可用
    _getDynicCounpDisable(data) {
      let flag = this.disable;
      if (!this.disable && data.giftStatus != 1 && data.giftStatus != 2) {
        // 置灰是false的时候动态计算(组件被传递强制置灰true，就不需要计算, false时候就根据优惠券的状态来计算)
        if (data.status == 4) {
          // 已过期
          flag = true;
        } else if (data.status == 5) {
          // 已作废
          flag = true;
        } else if (data.isCodeExpired == 1) {
          // 已过期（领取的优惠券)
          flag = true;
        } else if (data.useStatus >= 1) {
          // 已使用
          flag = true;
        }
      }
      return flag;
    },
    // 设置是否显示展开按钮
    // _setShowExpandBtn() {
    //   let isHadCalc = false; //是否已经计算过啦
    //   this.ftDescElemId = `coupon-footer-desc-${this._uid}`;
    //   this.ftLeftElemId = `coupon-footer-left-${this._uid}`;
    //   this.ftRightElemId = `coupon-footer-right-${this._uid}`;
    //   this.ftElemId = `coupon-footer-${this._uid}`;
    //   this.$nextTick(() => {
    //     let ftDescElem = document.getElementById(this.ftDescElemId);
    //     let parentElem = this.$parent.$el;
    //     if (!ftDescElem) return;
    //     if (parentElem && window.getComputedStyle(parentElem).display == 'none') {
    //       // 当父组件（也是一个组件，display:none)的时候，那么就要监听display的变化，来计算
    //       const observer = new MutationObserver(mutationsList => {
    //         for (const mutation of mutationsList) {
    //           if (mutation.type == 'attributes') {
    //             if (mutation.attributeName == 'style' && window.getComputedStyle(mutation.target).display != 'none' && !isHadCalc) {
    //               isHadCalc = true;
    //               this._calcShowExpandBtn();
    //             }
    //           }
    //         }
    //       });
    //       observer.observe(this.$parent.$el, { attributes: true });
    //     } else {
    //       this._calcShowExpandBtn();
    //     }
    //   });
    // },
    // _calcShowExpandBtn() {
    //   let ftLeftElemRect = document.getElementById(this.ftLeftElemId).getBoundingClientRect();
    //   let ftRightElemRect = document.getElementById(this.ftRightElemId).getBoundingClientRect();
    //   let ftElemRect = document.getElementById(this.ftElemId).getBoundingClientRect();
    //   if (ftLeftElemRect.width + ftRightElemRect.width >= ftElemRect.width) {
    //     this.isShowExpandBtn = true;
    //   }
    // },
    // 已经使用，已过期状态等
    _getStatusInfo(data) {
      let res = null;
      if (data.useStatus >= 1) {
        // 已经使用
        res = {
          className: 'icon-yishiyong'
        };
      } else if (data.isCodeExpired == 1) {
        // 已过期(已经领取的优惠券)
        res = {
          className: 'icon-yiguoqi'
        };
      } else if (data.status == 4) {
        // 已过期(创建的优惠券已经过期)
        res = {
          className: 'icon-yiguoqi'
        };
      }
      return res;
    },
    // 获取按钮显示与否信息
    _getBtnInfo(couponItem) {
      let res = {
        showCheck: false, // 查看按钮
        showUse: false, // 使用按钮
        showGet: true // 领取按钮
      };
      // 没有限制领取数量，且已经领取超过最大的限制（显示查看按钮 ，屏蔽领取按钮）
      if (couponItem.limit != -1 && couponItem.hasReceive >= couponItem.limit) {
        res = {
          showCheck: true, // 查看按钮
          showUse: false, // 使用按钮
          showGet: false // 领取按钮
        };
      }
      // 已经领取了（有兑换码，显示使用按钮)
      if (couponItem.eRcdId) {
        res = {
          showCheck: false, // 查看按钮
          showUse: true, // 使用按钮
          showGet: false // 领取按钮
        };
      }
      if (this.isCouponDisable) {
        res = {
          showCheck: false, // 查看按钮
          showUse: false, // 使用按钮
          showGet: false // 领取按钮
        };
      }
      return res;
    },
    // 获取有效期字
    _getValidityPeriodText(data) {
      let res = '';
      // 领取以后就暂时有效期
      if ((data.startAt && data.endAt) || (data.eRcdId && data.startAt && data.endAt)) {
        // 优惠券的（正常的字段都是取startAt  endAt
        res = '有效期：' + data.startAt.substr(0, 10).replace(/-/g, '.') + '-' + data.endAt.substr(0, 10).replace(/-/g, '.');
      } else if (data.validStatus == 1) {
        res = `领券当日起${data.validPeriod}天内可用`;
      } else if (data.validStatus == 2) {
        res = `领券次日起${data.validPeriod}天内可用`;
      }
      return res;
    },
    // 获取适用范围
    _getApplyText(data) {
      let applyText = '';
      if (data.redeemType == 26) {
        applyText = (data.prodType == 200 ? '推广课程' : '全店商品') + '可用'; // 记得校对
      } else if (data.redeemType == 24 || data.redeemType == 1000) {
        applyText = '指定商品可用';
      } else if (data.redeemType == 25) {
        applyText = '适用于商城商品';
      } else if (data.redeemType == 114) {
        applyText = '适用于预约师资功能';
      } else if (data.redeemType == 27) {
        applyText = '适用于' + (data.prodTypes ? data.prodTypes.join('、') : '');
      } else {
        applyText = '指定商品可用';
      }
      if (data.type == 5 && !!data.enableTotalAmount) {
        // 折扣券，有最多优惠
        applyText += `，最高可减${data.totalAmount}元`;
      }
      // 兑换券是全店商品可用，不展示适用范围
      if (data.type == 1) {
        applyText = '';
      }
      return applyText;
    },
    // 获取右上角标签
    _getTagInfo(data) {
      let res = null;
      if (data.couponNum && !!Number(data.couponNum) && Number(data.couponNum) > 1) {
        res = {
          text: data.couponNum,
          className: 'bg-mred-10'
        };
      } else if (data.receivedCouponNum && !!Number(data.receivedCouponNum) && Number(data.receivedCouponNum) > 1) {
        res = {
          text: data.receivedCouponNum,
          className: 'bg-mred-10'
        };
      }
      return res;
    },
    getApplyText(item) {
      let applyText = '';
      if (item.redeemType == 26) {
        applyText = item.type == 6 ? '指定商品' : '全店商品' + '可用';
      } else if (item.redeemType == 24 || item.redeemType == 1000) {
        applyText = '指定商品可用';
      } else if (item.redeemType == 25) {
        applyText = '适用于商城商品';
      } else if (item.redeemType == 114) {
        applyText = '适用于预约师资功能';
      } else if (item.redeemType == 27) {
        applyText = '适用于' + (item.prodTypes ? item.prodTypes.join('、') : '');
      } else {
        applyText = '指定商品可用';
      }
      return applyText;
    },
    getAmountText(item) {
      let amountText = '';
      if (item.prodType == 200) {
        amountText = item.type == 6 ? '付费券' : '免费券';
      } else {
        amountText = Number(item.amount) > 0 && item.subType == 2 ? '满' + Number(item.amount) + '可用' : '无门槛';
      }
      return amountText;
    },
    // 跳转到个人中心我的优惠券
    goMyValueVoucher(item) {
      this.$routerGo(this, 'push', {
        path: '/member/myValueVoucher/myValueVoucher',
        query: { couponType: [2, 3, 4, 5].includes(item.type) ? 2 : item.type }
      });
    },
    // 去使用产品
    goUseCoupon(item) {
      const { eRcdId, type, redeemCodeId } = item;
      console.log(this.couponType);
      if (utilJs.getStoreId()) {
        // 是门店，点击使用直接跳转到首页
        this.$routerGo(this, "push", {
          path: '/'
        })
      } else if (item.prodType == 200) {
        const q = { fromType: 2 };
        if (eRcdId) {
          q.rcdId = eRcdId;
        } else {
          q.id = redeemCodeId;
        }
        this.$routerGo(this, 'push', {
          path: '/homePage/shareholder/shCouponDetail',
          query: q
        }); // redeemCodeId优惠券id， rcdId：码库id
      } else {
        utilJs.postMethod(global.apiurl + 'coupon/hasProds/' + item.eRcdId, {}, res => {
          if ((res.prodInfo && JSON.stringify(res.prodInfo) === '[]') || item.redeemType == 27) {
            const toPath = item.redeemType == 25 ? '/mall/classification/classificationAll' : item.type == 4 ? '/homePage/booking/bookingList' : '/';
            this.$routerGo(this, 'push', {
              path: toPath
            });
          } else {
            this.$routerGo(this, 'push', {
              path: '/member/myExchange/toExchange',
              query: { eExchangeCode: eRcdId, cType: type }
            });
          }
        });
      }
    },
    // 领取优惠券
    getCoupon(cItem) {
      const { encRedeemCodeId, rType, cType } = cItem;
      if (localStorage.getItem('enableBindPhoneInRedeemCode') == 1 && !localStorage.getItem('uMobile')) {
        utilJs.goBindMobile();
      } else {
        // sourc==2：从首页领取
        this._isGetCouponRequesting = true;
        utilJs.postMethod(
          global.apiurl + 'redeemCodes/collectRedeemCodeId/' + encRedeemCodeId,
          { source: this.source },
          res => {
            this._isGetCouponRequesting = false;
            if (res.status != 8 && res.status != 15) {
              this.$showCjToast({
                text: res.detail,
                type: 'warn'
              });
              return;
            }
            cItem.hasReceive++;
            this.btnInfo = this._getBtnInfo(cItem);
            this.$emit('getSuccess', cItem);
            if (this.successTipType == 1) {
              this.$showCjToast({
                text: '领取成功！',
                type: 'success'
              });
            } else {
              this.$cjConfirm({
                message: '恭喜您，领取成功！',
                showCancelButton: true, // 是否显示取消按钮
                cancelButtonText: '取消', // 取消按钮文本
                confirmButtonText: '去使用', // 确认按钮文本
                onConfirm: () => {
                  if ((res.prodInfo && JSON.stringify(res.prodInfo) === '[]') || rType == 27) {
                    const toPath = rType == 25 ? '/mall/classification/classificationAll' : cType == 4 ? '/homePage/booking/bookingList' : '/';
                    this.$routerGo(this, 'push', {
                      path: toPath
                    });
                  } else {
                    this.$routerGo(this, 'push', {
                      path: '/member/myExchange/toExchange',
                      query: { eExchangeCode: res.eRcdId, cType: cType }
                    });
                  }
                }
              });
            }
          },
          () => {
            this._isGetCouponRequesting = false;
          }
        );
      }
    }
  }
};
</script>

<style scoped lang="scss">
.xmlred-bd1 {
  border: 1px solid #ff300c;
}
.bl-bg {
  left: -0.25rem;
  bottom: -0.25rem;
}
.br-bg {
  right: -0.25rem;
  bottom: -0.25rem;
}
.c-mww144 {
  min-width: 3.6rem;
}
.bg-FF300C-10 {
  background: rgba(255, 48, 12, 0.1);
}
.bg-23DB85-10 {
  background: rgba(35, 219, 133, 0.1);
}

.divider-line {
  height: 0.5rem;
  position: relative;
  &::after {
    content: '';
    border: 0.5px dashed #f2f2f2;
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    top: 50%;
    transform: translate(0, -50%);
  }
  .circle-lf,
  .circle-rt {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #f5f7fa;
    border-radius: 100%;
    position: absolute;
    top: 0;
  }
  .circle-lf {
    left: -0.25rem;
  }
  .circle-rt {
    right: -0.25rem;
  }
}
.tag-zz {
  border: 1px solid #f64163;
  border-radius: 0.2rem;
  margin-left: 0.25rem;
  color: #f64163;
  font-size: 0.45rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.625rem;
  line-height: 0.625rem;
}
.bg-FF300C-10 {
  background: rgba(255, 48, 12, 0.1);
}
.bg-23DB85-10 {
  background: rgba(35, 219, 133, 0.1);
}
.bg-mred-10 {
  background: rgba(255, 48, 12, 0.1);
}
.coms-coupon-item {
  &.disable {
    filter: grayscale(1);
    * {
      color: #999 !important;
    }
  }
}
.bg-f64163 {
  background-color: #f64163;
}

.coupon-type-1 {
  background: url('../../assets/i/wap/coupon/duihuanquan1.png') no-repeat center center;
  background-size: auto 100%;
}


.coms-coupon-item {
  .body-left {
    padding: 0 0.125rem;
    min-height: 2.1rem;
  }
  &.large {
    .body-left {
      width: 4.5rem;
    }
  }
  &.small {
    .body-left {
      width: 3.375rem;
    }
  }
}
</style>
